<template>
  <div class="order-list-table">
    <!-- <div class="list-title">{{ active !== 'total' ? '询单列表' : '统计列表' }}</div> -->
    <div class="batch-item">
      <el-row v-if="active !== 'total'" class="header-form card-filter-box">
        <el-col :xs="22" :sm="22" :md="22" :lg="24" :xl="24">
          <el-form :inline="true" :model="queryForm" class="query-form">
            <el-form-item>
              <el-input v-model.trim="queryForm.listContent" size="small" clearable placeholder="请输入关键词" class="input-width-select input-width-select-bg" @change="queryClick">
                <el-select slot="prepend" v-model="queryForm.listKey" placeholder="请选择" class="changeStatus" popper-class="global-select-down" @change="selectChange">
                  <el-option
                    v-for="item in keyOption"
                    :key="item.key"
                    :label="item.name"
                    :value="item.key" />
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker
                v-model="queryForm.dateTime"
                :unlink-panels="true"
                :clearable="true"
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="timestamp"
                format="yyyy/MM/dd"
                size="small"
                @change="queryClick"/>
            </el-form-item>
            <el-form-item label="响应时间">
              <el-date-picker
                v-model="queryForm.responseTime"
                :clearable="true"
                value-format="timestamp"
                type="date"
                size="small"
                class="res-time"
                format="yyyy/MM/dd"
                placeholder="请选择时间"
                @change="queryClick"/>
            </el-form-item>
            <div class="query-button" style="margin-bottom: 22px">
              <el-button class="search-btn-style" plain type="primary" size="small" @click="queryClick">查询</el-button>
              <el-button class="clear-btn-style" style="margin-left: 6px" type="text" size="small" @click="queryEmpty">
                清空
                <img :src="clearIcon" class="clear-icon" alt="clear">
              </el-button>
            </div>
          </el-form>
        </el-col>
      </el-row>
      <div v-if="(!data.items || data.items.length <= 0) && init" class="empty-container">
        <img :src="emptyIcon" class="empty-img" alt="">
        <div class="empty-title">暂无数据</div>
      </div>
      <div v-loading="loading" v-else :style="active === 'total'?{marginTop: '32px'}:''" class="order-list">
        <template v-if="data.items && data.items.length">
          <div v-if="active !== 'total'">
            <div v-for="(item, index) in data.items" :key="index" class="order-item">
              <MediumOrderItem :data="item" @getData="$emit('getOrder')" />
            </div>
          </div>
          <div v-else class="">
            <MediumTotalItem :data="data.items"/>
          </div>
        </template>
        <el-row v-if="showMobilePage" type="flex" justify="left">
          <el-pagination
            v-show="data.total > 0"
            :current-page.sync="data.page"
            :page-size="data.perPage"
            :total="data.total"
            :small="true"
            :layout="'total, prev, next, jumper'"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <el-row
          v-if="!showMobilePage && data && data.items && data.items.length > 0"
          :class="{'pagination-area':active!=='total' }"
          :style="active==='total'?{marginTop: '20px'}:{}"
          type="flex"
          justify="end">
          <el-pagination
            v-show="data.total > 0"
            :current-page.sync="data.page"
            :page-size="data.perPage"
            :total="data.total"
            layout="total, prev, pager, next, jumper"
            @current-change="handleCurrentChange" />
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import MediumOrderItem from '@/components/MediumPage/order/MediumOrderListItem';
import MediumTotalItem from '@/components/MediumPage/order/MediumTotalItem';
import emptyIcon from '@/assets/empty-table-data.png';
import clearIcon from '@/assets/medium/clear.png';
import { mapState } from 'vuex';

export default {
  name: 'OrderList',
  components: { MediumOrderItem, MediumTotalItem },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    init: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    active: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      emptyIcon,
      clearIcon,
      queryForm: {
        listKey: 'orderNum',
        listContent: '',
        dateTime: [],
        responseTime: ''
      },
      keyOption: [{
        key: 'orderNum',
        name: '询单号'
      }, {
        key: 'brandName',
        name: '品牌名称'
      }, {
        key: 'resourceName',
        name: '资源名称'
      }]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    selectChange() {
      this.queryForm.listContent = '';
    },
    handleCurrentChange(toPage) {
      this.$emit('getCurrentPage', toPage);
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    },
    queryClick() {
      const obj = this.queryForm;
      if (obj.dateTime === null) obj.dateTime = [];
      const query = {
        responseTime: obj.responseTime,
        startTime: obj.dateTime[0],
        endTime: obj.dateTime[1],
        [obj.listKey]: obj.listContent
      };
      this.$emit('querySearch', query);
    },
    queryEmpty() {
      this.queryForm = {
        listKey: 'orderNum',
        listContent: '',
        dateTime: [],
        responseTime: ''
      };
      this.queryClick();
    }
  }
};
</script>
<style lang="scss" scoped>
.order-list-table {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 10px;
  padding-bottom: 20px;
  .order-list{
    min-height: 200px;
    margin: 0px 20px 20px 20px;
    // border:1px solid #eee;
    box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
    border-radius:12px;
    background-color: #fff;
    padding: 24px 24px 24px 24px;
    .order-item {
      margin-bottom: 15px;
      overflow: hidden;
      background:#fff;
      box-shadow:2px 4px 13px 0px #DDE1EA;
      border-radius:8px;
    }
  }
  &::v-deep {
    .el-date-editor--daterange.el-input__inner, .el-date-editor.el-input {
      width: 240px !important;
    }
  }
}
.empty-container {
  text-align:center;
  margin-top:50px;
  .empty-img {
    width: 120px;
  }
  .empty-title {
    font-size: 15px;
    // margin-top: 20px;
    text-align: center;
  }
}
.batch-item {
  overflow: hidden;
  .input-width-select {
    & ::v-deep {
      .el-input__inner:last-child {
        background: #FAFAFC;
      }
    }
  }
}
</style>
